<template>
  <div>
    <div class="search_top">
        <a-form layout="inline">
          <a-form-item label="菜单名称">
            <a-input></a-input>
          </a-form-item>
            <a-form-item label="状态">
            <a-input></a-input>
          </a-form-item>
          <a-form-item>
              <a-button type="primary">搜索</a-button>
              <a-button danger>重置</a-button>
          </a-form-item>
        </a-form>
    </div>
    <!--dataSource 表格需要的数据  columns 表头需要的数据 -->
      <a-table :dataSource="dataSource" :columns="columns" >
        <!-- 表头的部门的大插槽 -->
          <template #headerCell="{ column }">
              <template v-if="column.key === 'icon'">
                   <span style="color:red;">  <TwitterOutlined /> 图标</span>
              </template>
          </template>
        <!-- 表格内容部分的大插槽 -->
          <template #bodyCell="{text, record, index, column }">
            <!-- 自定义菜单状态 -->
            <template v-if="column.dataIndex === 'status'">
              <div>
                   {{text==0?'正常':'停用'}}
              </div>
            </template>
            <!-- 自定义操作的按钮 -->
              <template v-if="column.dataIndex === 'action'">
                    <a-button type="link"><TwitterOutlined />修改</a-button>
                    <a-button type="link">新增</a-button>
                    <a-button type="link" @click="toDel(record)">删除</a-button>
              </template>
          </template>


      </a-table>
  </div>
</template>
<script setup>
    import {ref,reactive} from 'vue'
    import {listMenu,delMenu} from '@/api/menu'
    import {handleTree} from '@/utils/ruoyi'
    import {TwitterOutlined } from '@ant-design/icons-vue'
    let formQuery=reactive({
       menuName:"",
        status:""
    })
    // 获取菜单列表接口的调用
    let getList=async ()=>{
      let res=await listMenu(formQuery)
      console.log(res,"8888888888888888888888菜单列表")
      dataSource.value=handleTree(res.data,"menuId")
      console.log( dataSource.value,"处理后的菜单列表")
    }
    getList();

    // 删除接口的调用 
    let toDel=async (record)=>{
      console.log(record,"当前行数据")
      let res=await delMenu(record.menuId)
      console.log(res,"删除接口的调用")
        getList()
    
    }


    // 表头的数据
      let columns=[
          {
            title: '菜单名称',
            dataIndex: 'menuName',
            key: 'menuName',
          },
          {
            title: '图标',
            dataIndex: 'icon',
            key: 'icon',
          },
          {
            title: '排序',
            dataIndex: 'orderNum',
            key: 'orderNum',
          },
            {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
          },
           {
            title: '组件路径',
            dataIndex: 'path',
            key: 'path',
          },
           {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
          },
           {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
          },
        ]

        // 表格的数据
        let dataSource=ref([
           {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          }
        ])

</script>
<style lang="scss">
  .search_top{
    width: 1200px;
    margin: 20px auto;
  }
</style>